<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主界面</title>
    <style>
        html,
        body {
            margin: 0%;
            font-size: 4px;
        }

        .header {
            background-color: #4a5259;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: aliceblue;
        }

        .nav {
            display: flex;
        }

        .nav a {
            padding: 15px;
            color: aliceblue;
            text-decoration: none;
        }

        .activ {
            border-bottom: 2px solid #F3C244;
        }

        .welcome {
            display: flex;
            align-items: center;
            /* 让welcom这个div作为二级菜单的定位参考，所以.welcome不能是position：static */
            position: relative;
        }

        .submenu {
            background-color: #4a5259;
            padding: 15px;
            /* 以.welcome作为参考，确定.submenu的位置 */
            position: absolute;
            top: 47px;
            right: 0%;

        }

        /* submenu里面的a标签的样式控制 */
        .submenu a {
            display: block;
            color: aliceblue;
            text-decoration: none;
            padding: 15px;
        }

        /* 二级菜单默认隐藏状态 */
        .submenu {
            display: none;
        }

        /* 当鼠标移进welcome时，里面的submenu元素显示出来 */
        .welcome:hover .submenu {
            display: block;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="nav">
            <a href="#" class="activ">GRTS-MMS</a>
            <a href="#">仪表板</a>
            <a href="customer-create.html" target="workspace">录入客户信息</a>
            <a href="customer-view.html" target="workspace">查看客户信息</a>
        </div>
        <div class="welcome">
            <svg style="padding: 15px;" t="1653122420212" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3792" width="16" height="16">
                <path
                    d="M500 128.8c-95.2 5.6-173.6 83.2-180 178.4-7.2 112 80.8 205.6 191.2 205.6 106.4 0 192-86.4 192-192 0.8-110.4-92-198.4-203.2-192zM512 575.2c-128 0-383.2 64-383.2 192v96c0 17.6 14.4 32 32 32h702.4c17.6 0 32-14.4 32-32V766.4c0-127.2-255.2-191.2-383.2-191.2z"
                    p-id="3793" fill="#e6e6e6"></path>
            </svg>
            <span style="padding: 15px;">欢迎您，xxx</span>

            <svg style="padding: 15px;" t=" 1653122499216" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="4918" width="16" height="16">
                <path
                    d="M517.688889 796.444444c-45.511111 0-85.333333-17.066667-119.466667-51.2L73.955556 381.155556c-22.755556-22.755556-17.066667-56.888889 5.688888-79.644445 22.755556-22.755556 56.888889-17.066667 79.644445 5.688889l329.955555 364.088889c5.688889 5.688889 17.066667 11.377778 28.444445 11.377778s22.755556-5.688889 34.133333-17.066667l312.888889-364.088889c22.755556-22.755556 56.888889-28.444444 79.644445-5.688889 22.755556 22.755556 28.444444 56.888889 5.688888 79.644445L637.155556 739.555556c-28.444444 39.822222-68.266667 56.888889-119.466667 56.888888 5.688889 0 0 0 0 0z"
                    p-id="4919" fill="#e6e6e6"></path>
            </svg>
            <!-- 二级菜单：修改密码、退出系统 -->
            <div class="submenu">
                <a href="#">修改密码</a>
                <a href="#">退出系统</a>
            </div>
        </div>
    </div>
    <div class="workspace">
       <iframe name="workspace" src="" frameborder="0" width="100%" height="600px"></iframe>
    </div>
</body>

</html>